<template>
  <div class="home">
    <el-alert
      title="已有管理员列表"
      type="error"
      :closable="false"
      effect="dark"
      center
    ></el-alert>
    <el-table
      v-if="tableData.length != 0"
      border
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column align="center" type="index" width="50" label="序号">
      </el-table-column>
      <el-table-column
        align="center"
        prop="username"
        label="用户名"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="phone"
        label="手机"
      ></el-table-column>
      <el-table-column align="center" prop="password" label="密码">
        <template>
          ******
        </template>
      </el-table-column>
      <el-table-column align="center" prop="grade" label="权限">
        <template slot-scope="scope">
          <span class="binding" v-if="scope.row.grade >= 999">管理员</span>
          <span class="binding" v-else>普通用户</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="date" label="添加时间">
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="100"
        v-if="user.username === 'admin'"
      >
        <template slot-scope="scope">
          <el-button
            @click="slectGrade(false, scope.row._id)"
            type="text"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div v-else>暂无数据</div>
  </div>
</template>
<script>
import { administrator, updateGrade } from "../../api/user";
export default {
  name: "index",
  data() {
    return {
      tableData: [],
    };
  },
  computed: {
    user() {
      return this.$store.getters.user;
    },
  },
  methods: {
    getAdministrator() {
      administrator().then((res) => {
        if (res.success === true) {
          this.tableData = res.result;
        }
      });
    },
    slectGrade(grade, _id) {
      updateGrade({
        grade,
        _id,
      }).then((res) => {
        if (res.success) {
          this.getAdministrator();
        }
      });
    },
  },
  mounted() {
    this.getAdministrator();
  },
};
</script>
<style scoped lang="scss"></style>
